<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>微博网页版</title>
    <link rel="stylesheet" href="./css/faxian.css">
    <script src="./fonts/iconfont.js"></script>
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <script src="./js/faxian.js"></script>
</head>

<body>
    <!-- 上下滚动的文字 -->
    <header id="top2">
        <div class="topOut">
            <div class="search">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-sousuo"></use>
                </svg>
                <div class="swiper s2">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide">正在活跃 白鹿</div>
                      <div class="swiper-slide">正在活跃 周深</div>
                      <div class="swiper-slide">正在活跃 大连东软信息学院</div>
                      <div class="swiper-slide">正在活跃 王者荣耀</div>
                      <div class="swiper-slide">正在活跃 猫猫</div>
                    </div>
        </div>
    </header>
    <nav id="snav"></nav>
    <main></main>
    <aside></aside>
    <section id="ad"></section>
    <nav id="bnav"></nav>
    <!-- 下导航 -->
    <footer>
        <nav class="bnav">
         <div class="btnav">
             <div class="bonav">
                 <a href="./shouye（guanzhu）.html">
                     <svg class="icon" aria-hidden="true">
                         <use xlink:href="#icon-shouye1"></use>
                     </svg>
                 </a>
                 <p>
                     <a href="#">首页</a>
                 </p>
             </div>
             <div class="bonav">
                 <a href="./chaohua（kantie）.html">
                     <svg class="icon" aria-hidden="true">
                         <use xlink:href="#icon-chaohua"></use>
                     </svg>
                 </a>
                 <p>
                     <a href="#">超话</a>
                 </p>
             </div>
             <div class="bonav">
                 <a href="./faxian.html">
                     <svg class="icon" aria-hidden="true">
                         <use xlink:href="#icon-Magnifier"></use>
                     </svg>
                 </a>
                 <p>
                     <a href="#">发现</a>
                 </p>
             </div>
             <div class="bonav">
                 <a href="./xiaoxi.html">
                     <svg class="icon" aria-hidden="true">
                         <use xlink:href="#icon-xinfeng"></use>
                     </svg>
                 </a>
                 <p>
                     <a href="#">消息</a>
                 </p>
             </div>
             <div class="bonav">
                 <a href="./wo.html">
                     <svg class="icon" aria-hidden="true">
                         <use xlink:href="#icon-wo"></use>
                     </svg>
                 </a>
                 <p>
                     <a href="#">我的</a>
                 </p>
             </div>
         </div> 
     </nav>
     </footer>

     <!-- 选项卡 -->
     <div class="main">
        <div class="midFoutop">
            <ul>
                <li class="selected">发现<div class="pic"></div>
                </li>
                <li>热点<div class="pic none"></div>
                </li>
                <li>视频<div class="pic none"></div>
                </li>
                <li>找人<div class="pic none"></div>
                </li>
            </ul>
        </div>
        <div class="box">
            <ul class="lm">
                <li>
                    <ul class="o">
                        <li>劳荣枝法子英90</li>
                        <li>听董宇辉讲杜甫的一生</li>
                        <li>学被风吹成了海的模样</li>
                        <li>任豪 目前单身</li>
                        <li>抖音回应西方甄选</li>
                        <li>俞敏洪检讨自己早期</li>
                    </ul>
                    <ul class="t">
                        <li>赵露思上台忘记脱毛衣</li>
                        <li>上海男篮VS辽宁男篮</li>
                        <li>易烊千玺新片演脑瘫</li>
                        <li>饿了么免单</li>
                        <li>王一博到底在急什么</li>
                        <li>金奎来 恋爱</li>
                    </ul>

                </li>
        
        </ul>
        </div>
        
        <div class="box none">
        <ul>
            <li>
                <div class="list">
                    <ul class="o">
                        <li>劳荣枝法子英90</li>
                        <li>听董宇辉讲杜甫的一生</li>
                        <li>学被风吹成了海的模样</li>
                        <li>任豪 目前单身</li>
                        <li>抖音回应西方甄选</li>
                        <li>俞敏洪检讨自己早期</li>
                    </ul>
                    <ul class="t">
                        <li>赵露思上台忘记脱毛衣</li>
                        <li>上海男篮VS辽宁男篮</li>
                        <li>易烊千玺新片演脑瘫</li>
                        <li>饿了么免单</li>
                        <li>王一博到底在急什么</li>
                        <li>金奎来 恋爱</li>
                    </ul>
                </div>
            </li>
            <li>
                    <!-- 三个小框 -->
                <div class="sanzhong">
                    <div class="weiboresou">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-huobao"></use>
                        </svg>
                        <p>微博热搜</p>
                    </div>
                    <div class="wenyuresou">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-fujinjiudian"></use>
                        </svg>
                        <p>文娱热搜</p>
                     </div>
                    <div class="tongchengresou">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-aixin"></use>
                        </svg>
                        <p>同城热搜</p>
                    </div>
                </div>
            </li>
            <li>        
                <!-- 微博正文（左图右文） -->
                <div class="neirong">
                    <div class="tuxiang">
                        <a href="#">
                        <img src="./images/chaohua(kantie)/8.jpg">
                        </a>
                    <div class="txt">
                        <h3>skullpanda忠实粉丝</h3>
                        <span class="fujia1">12-10</span>
                        <span class="fujia2">@喵姐</span>
                            <div class="guanzhu2">
                        <span>+加关注</span>
                            </div>
                    </div> 
                </div>
                    <div class="tuxiang2">
                        <p>#meme##今日memes#</p>
                        <img src="./images/chaohua(kantie)/9.jpg">
                    </div>
                <div class="kuaijiejian">
                    <div class="tuxiang3">
                    <img src="./images/chaohua(kantie)/头像.jpg" alt="">
                    </div>
                    <div class="pinglunsearch">
                        <input type="text" name="search" id="search" placeholder="友善评论，文明发言">
                    </div>
                </div>
                <div class="santubiao">
                    <div class="sanyang">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-zhuanfa"></use>
                        </svg>
                        <span>6</span>
                    </div>
                    <div class="sanyang">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-liuyan"></use>
                        </svg>
                        <span>2</span>
                    </div>
                    <div class="sanyang">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-good"></use>
                        </svg>
                        <span>105</span>
                    </div>
    </div>
                </div>
            </li>
        </ul>
        </div>
        
        
        <div class="box none">
        <ul>
        <li>
            <div class="list">
                <ul class="o">
                    <li>劳荣枝法子英90</li>
                    <li>听董宇辉讲杜甫的一生</li>
                    <li>学被风吹成了海的模样</li>
                    <li>任豪 目前单身</li>
                    <li>抖音回应西方甄选</li>
                    <li>俞敏洪检讨自己早期</li>
                </ul>
                <ul class="t">
                    <li>赵露思上台忘记脱毛衣</li>
                    <li>上海男篮VS辽宁男篮</li>
                    <li>易烊千玺新片演脑瘫</li>
                    <li>饿了么免单</li>
                    <li>王一博到底在急什么</li>
                    <li>金奎来 恋爱</li>
                </ul>
            </div>
        </li>
        </ul>
        </div>
        
        
        <div class="box none">
            <ul>
                <li>
                    <div class="list">
                        <ul class="o">
                    <li>劳荣枝法子英90</li>
                    <li>听董宇辉讲杜甫的一生</li>
                    <li>学被风吹成了海的模样</li>
                    <li>任豪 目前单身</li>
                    <li>抖音回应西方甄选</li>
                    <li>俞敏洪检讨自己早期</li>
                        </ul>
                        <ul class="t">
                            <li>赵露思上台忘记脱毛衣</li>
                            <li>上海男篮VS辽宁男篮</li>
                            <li>易烊千玺新片演脑瘫</li>
                            <li>饿了么免单</li>
                            <li>王一博到底在急什么</li>
                            <li>金奎来 恋爱</li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        
        </div>
     <script src="./js/swiper-bundle.min.js"></script>
     <!-- 上下滚动的文字script -->
     <script>
        var swiper2 = new Swiper(".s2", {
            direction: "vertical",
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
        });

         //找到main
		var main = document.getElementsByClassName( "main" )[0];
		var li = main.querySelectorAll( ".midFoutop li" );
		var box = main.querySelectorAll( ".box" );
		console.log( main, li, box )

		for ( let i = 0; i < li.length; i++ ) {
			li[i].onmouseover = () => {
				for( let j = 0; j < li.length; j++ ){
					li[j].classList.remove( "selected" );
					box[j].style.display = "none";
				}
				li[i].classList.add( "selected" );
				box[i].style.display = "block";
				//box[i]不能改为this，因为使用箭头函数
			}
		}

     </script>
</body>
</html>